<template>
  <div class="app-container">
      <!-- 专项练习 -->
    <div class="backgroundClass">
        <div class="titleBox">
          <span class="title_fontSize">专项练习</span>
        </div>
        <div class="content-box" v-loading='loading' element-loading-text="急速加载中...">
          <el-radio-group v-model="tiku">
            <el-radio-button style='margin-bottom:12px;' label="练习题库">全部题库</el-radio-button>
            <el-radio-button v-if="isShowJX" style='margin-bottom:12px;' label="精选题库">精选题库</el-radio-button>
          </el-radio-group>
          <div class="content-box-title">
            <span>
              专项练习可以多次循环答题，您可以有针对性的练习各类题型。
            </span>
          </div>
          <el-form label-position="left" label-width="86px">
            <el-form-item label="用户姓名:" class="noneMargin">
                <span>{{nickname}}</span>
            </el-form-item>
            <el-form-item label="身份证号:" class="noneMargin">
                <span>{{adminUserId}}</span>
            </el-form-item>
            <el-form-item label="练习科目:">
                <el-select v-model="subjectid" placeholder="请选择" disabled style="width:100% !important;">
                  <el-option
                    v-for="item in userinfor"
                    :key="item.id"
                    :label="item.subjectTitle"
                    :value='item.subject_id'
                    >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出题模式:">
                  <el-select v-model="value2" placeholder="请选择" style="width:100% !important;">
                  <el-option
                    label="循环模式"
                    value='2'
                    >
                  </el-option>
                  <el-option
                    label="普通模式"
                    value='1'
                    >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="练习类别:" v-if='isYes'>
                  <el-select v-model="value" placeholder="请选择" style="width:100% !important;">
                  <el-option
                    label="只做新题"
                    value='新题'
                    >
                  </el-option>
                  <el-option
                    label="只做错题"
                    value='错题'
                    >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="练习题型:">
                <el-radio-group v-model="radio" size="small">
                  <el-radio label="" border v-if="gz!='大培训'">全部</el-radio>
                  <el-radio label="单选" border>单选题</el-radio>
                  <el-radio label="判断" border>判断题</el-radio>
                  <el-radio label="多选" border v-if="gz=='特种设备'||gz=='燃气从业人员培训'||gz=='现场监护人培训'||gz=='大培训'">多选题</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="判断题型:" v-if='radio=="判断"'>
                <el-select v-model="dxtx" placeholder="请选择" style="width:100% !important;" :multiple="true">
                  <!-- <el-option
                    label="全部题型"
                    value='全部'
                    >
                  </el-option> -->
                  <el-option
                    label="正确题型"
                    value='正确'
                    >
                  </el-option>
                  <el-option
                    label="错误题型"
                    value='错误'
                    >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单选题型:" v-if='radio=="单选"'>
                <el-select v-model="dxtx" placeholder="请选择" :multiple="true" style="width:100% !important;">
                  <el-option
                    label="选项A"
                    value='A'
                    >
                  </el-option>
                  <el-option
                    label="选项B"
                    value='B'
                    >
                  </el-option>
                  <el-option
                    label="选项C"
                    value='C'
                    >
                  </el-option>
                  <el-option
                    label="选项D"
                    value='D'
                    >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="答案提示:">
                <el-select v-model="daan" placeholder="请选择" style="width:100% !important;">
                  <el-option
                    label="不显示答案"
                    value='不显示'
                    >
                  </el-option>
                  <el-option
                    label="显示答案"
                    value='显示'
                    >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="知识点题库:" v-if="chapterList.length!=0">
                <el-select v-model="chapter_id" placeholder="请选择" style="width:100% !important;" clearable>
                  <el-option
                    :label="item.chapter_title"
                    :value='item.id'
                    v-for="item in chapterList"
                    :key="item.id"
                    >
                  </el-option>
                </el-select>
              </el-form-item>
          </el-form>
          <!-- <div class="content-box-footer">
            <span>
              练习提示：{{subject}}，共{{total}}道，您已答{{answered}}道。
            </span>
          </div> -->
          <div class="content-button">
            <!-- <el-button type="danger" style="margin-right:32px;">清除记录</el-button> -->
            <el-button type="primary" @click="startPractice">开始练习</el-button>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import {mapGetters}from'vuex'
import {exerList,getAnswered,getQcount,chapter}from'@/api/admin.js'
import { getsubject_id,getsubjectTitle,getapplyid,getisfacetime, getisfacetimezxface,} from '@/utils/auth'
export default {
  computed:{
    ...mapGetters(['userinfor','adminUserId','nickname'])
  },
  data() {
    return {
      value:'循环模式',//练习类别
      radio:'',//练习题型
      pdtx:[],//判断题型
      dxtx:[],//判断题型
      subject:'',//练习科目
      subjectid:'',//练习类别  传入后台数据
      daan:'不显示',
      gz:'',//工种
      restart:0,//是否重新做题  0否 1是
      isYes:false,
      value2:'2',//默认循环出题
      loading:false,//等待
      applyid:getapplyid(),

      total:0,//总题数
      answered:0,//做过的题数
      tiku:'练习题库',
      isShowJX:false,//是否显示精选题库按钮

      chapterList:[],
      chapter_id:'',
    }
  },
  watch:{
    value2(value){
      if(value=='1'){
        this.isYes=true
        this.value='新题'
      }else{
        this.isYes=false
        this.value='循环模式'
      }
    },
    radio(val){
      this.pdtx=[]
      this.dxtx=[]
    }
  },
  methods: {
    startPractice(){
      if(!this.subjectid){
        return this.$message.warning('请选择培训科目');
      }
      if(!this.value){
        return this.$message.warning('请选择练习类别');
      }
      // if(!this.radio){
      //   return this.$message.warning('请选择练习题型');
      // }
      let face = "";
      if (getisfacetime()) {
        face = JSON.parse(getisfacetime()).face;
      } else if (getisfacetimezxface()) {
        face = JSON.parse(getisfacetimezxface()).face;
      }
      let form = {
        subjectid:this.subjectid,
        gz:this.gz,
        qtype:this.radio,
        // pdtx:JSON.parse(JSON.stringify(this.pdtx)).join(),
        answer:JSON.parse(JSON.stringify(this.dxtx)).join(),
        form:JSON.parse(JSON.stringify(this.value)),
        restart:this.restart,
        applyid:this.applyid,
        pool:this.tiku,
        face
      }
      this.loading=true
      // delTi()
      if(this.chapter_id){
        form.chapter_id = this.chapter_id
        form.form = '知识点模式'
      }else{
        delete form.chapter_id
        form.form = JSON.parse(JSON.stringify(this.value))
      }
      exerList(form).then(res=>{
        if(res.code==200){
          if(res.data.status.indexOf('没有试题')!=-1||res.data.status.indexOf('没有错题')!=-1){
            this.loading=false
            this.$message.error(res.data.status);
          }
          if(res.data.status=='已做完'){
            this.loading=false
            this.$confirm('题库试题已做完，是否重新开始做题','提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              showClose:false,
            }).then(()=>{
              form.restart=1
              this.loading=true
              exerList(form).then(resA=>{
                this.loading=false
                if(resA.code==200){
                  // this.$store.dispatch('questions/commitTi',res.data.list)
                  this.$store.commit('SET_TI',resA.data.list)
                  this.$router.push('/exam?exerid='+resA.data.exerid+'&subjectid='+this.subjectid+'&daan='+this.daan+'&progress=' + resA.data.progress)
                }
              })
            }).catch(()=>{})
          }
          if(res.data.status=='正常'){
            this.loading=false
            // this.$store.dispatch('questions/commitTi',res.data.list)
            this.$store.commit('SET_TI',res.data.list)
            this.$router.push('/exam?exerid='+res.data.exerid+'&subjectid='+this.subjectid+'&daan='+this.daan+'&progress=' + res.data.progress)
          }
        }else{
          this.loading=false
          this.$message.error(res.msg);
        }
      })
    },
    //切换科目时
    changeSelect(value){
      this.subjectid = value.split('-')[0]
      this.gz = value.split('-')[1]
    },
    //知识点
    knowList(){
      this.chapterList=[]
      // this.chapterList.titles=[]
      chapter({
        subject_id: this.subjectid,
        limit:30,
      }).then(res=>{
        if(res.code==200){
          this.chapterList = res.data.list
        }
      })
    },
  },
  created() {
    
    this.$store.commit('DEL_TI')
    this.subject = getsubjectTitle()
    this.subjectid = Number(getsubject_id())
    this.gz = this.userinfor.filter(item=>item.subject_id==getsubject_id())[0].gz
    if(this.gz=='大培训'){
      this.radio = '单选'
    }
    getAnswered({subjectid:this.subjectid,applyid:getapplyid()}).then(res=>{
      if(res.code==200){
        this.total = res.data.total
        this.answered = res.data.answered
      }
    })
    getQcount({subjectid:this.subjectid,pool:'精选题库',applyid:getapplyid()}).then(res=>{
      if(res.code==200){
        if(res.data.count>0){
          this.isShowJX=true 
        }else{
          this.isShowJX=false 
        }
        if(this.$route.query.titleName&&this.$route.query.titleName!='undefined'){
          this.tiku='精选题库'
        }
      }
    })
    this.knowList()
  },
}
</script>

<style lang="scss" scoped>
@import '~@/styles/utis.scss';
.app-container{
  height:calc( 100vh - 50px) !important;
}
.backgroundClass{
  height:100%;
}
.titleBox{
    display: flex;
    min-width: 500px;
    border-bottom: 1px solid #EEEEEE;
    padding-bottom:24px;
    .title_fontSize{
        // line-height: 32px;
        font-size: 18px;
    }
  }
  .content-box{
    margin:0 auto;
    margin-top:  24px;
    width: 678px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding:32px 71px;
    .content-box-title{
      padding:16px 18px;
      background:#EAF9FF;
      span{
        color:#24AAF0;
        font-size: 16px;
      }
    }
    .content-box-footer{
      padding:16px 18px;
      background:#FEF3F1;
      span{
        color:#F33E34;
        font-size: 16px;
      }
    }
    .content-button{
      margin-top:20px;
      display: flex;
      justify-content: center;
    }
  }
  .el-form-item{
    margin-bottom: 24px;
  }
  .noneMargin{
    margin-bottom:20px;
  }
  ::v-deep{
    .is-disabled{
      .el-input__inner{
        color:#333;
      }
    }
     .el-radio-button{
        margin-bottom:20px !important;
        margin-right: 30px !important;
        .el-radio-button__inner{
            border:1px solid #ccc !important;
            border-radius:4px;
        }
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner{
        border-radius:4px;
        border-color:#1890ff !important;
    } 
  }
</style>